<template>
  <el-container>
    <!-- 头部区域 -->
    <el-header class="flex justify-between header-wapper">
      <Logo></Logo>
      <Navbar></Navbar>
    </el-header>
    <!-- 头部区域结束 -->
    <!-- 面包屑区域 -->
    <div style="background: #e6e8ea">
      <Humburger></Humburger>
    </div>
    <!-- 面包屑区域结束 -->
    <!-- 主体区域 -->
    <el-container>
      <!-- 左边菜单 -->
      <el-aside width="200px" v-show="SideBar">
        <power-Search></power-Search>
        <Aside @toggleSideBar="toggleSideBar"></Aside>
      </el-aside>
      <!-- 左边菜单结束 -->
      <!-- 右边内容 -->
      <el-main>
        <childMenu style="padding: 7px 0 0 0"></childMenu>
        <div class="bodyMargins">
          <!-- <keep-alive> -->
          <!-- <router-view :key="key"></router-view> -->
          <!-- </keep-alive> -->
          <router-view v-slot="{ Component }">
            <transition name="slide-left" mode="out-in">
              <component :is="Component" :key="key" />
            </transition>
          </router-view>
        </div>
      </el-main>
      <!-- 右边内容结束 -->
    </el-container>
  </el-container>
</template>

<script>
import Logo from '../components/Logo.vue'
import Aside from '../layouts/Aside.vue'
import Navbar from '../layouts/Navbars.vue'
import Humburger from '../components/Humburger.vue'
import childMenu from '../components/childMenu.vue'
import powerSearch from '@/layouts/powerSearch.vue'
import { mapState } from 'vuex'

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Home',
  components: { Logo, Aside, Navbar, Humburger, childMenu, powerSearch },
  data() {
    return {
      SideBar: true,
    }
  },
  computed: {
    ...mapState(['theme', 'childrenMenu']),

    key() {
      console.log('监测走了几次', this.$route.fullPath);
      localStorage.setItem('path', this.$route.fullPath)
      return this.$store.commit('Tage', this.$route.fullPath)

      // return this.$route.fullPath
      // 获取当前的路由
    },
  },
  mounted() {
    const theme = localStorage.getItem('theme')
    document.documentElement.style.setProperty('--menuItemHoverBackgroundColor', theme)
  },

  methods: {
    // 控制显示隐藏Aside
    toggleSideBar() {
      this.SideBar = false
    },
  },
}
</script>

<style lang="less" scoped>
.el-container {
  height: 100%;
}

.el-header {
  width: 100%;
}

.el-aside {
  overflow-x: hidden;
  // height: 100%;
}

.el-aside::-webkit-scrollbar {
  display: none;
}

.el-main {
  width: 100%;
  padding: 0px !important;
  // overflow-y: hidden;
}

.bodyMargins {
  padding: 5px 5px 0 10px;
  height: calc(100vh - 154px);
  background: #e6e8ea;
  overflow: scroll;
  // 下面两行代码解决切换路由时会有滚动条闪烁的问题
  position: relative;
  overflow: hidden;
  /* 隐藏该容器内的滚动条 */
}

.slide-left-enter {
  opacity: 0;
  -webkit-transform: translate(100px, 0px);
  transform: translate(-100px, 0px);
}

.slide-left-enter-active {
  transition: all 0.3s linear;
}

.slide-left-leave-to {
  opacity: 0;
  -webkit-transform: translate(-100px, 0px);
  transform: translate(100px, 0px);
}

.slide-left-leave-active {
  transition: all 0.3s linear;
}
</style>
